<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
</head>
<body>
	<div style="margin: 10px 0px 0px 10px">
		<div class="layui-inline">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input id="input1" type="text" class="layui-input">
			</div>
			出入库日期
			<div class="layui-input-inline">
				<input id="input2" type="date" class="layui-input">
			</div>
			<input id="searchBtn" type="button" value="搜索" class="layui-btn">
			<input id="addBtn" type="button" value="新增单据" class="layui-btn">
		</div>
	</div>

	<table id="danjuTable" lay-filter="table1"></table>

	<script type="text/html" id=operateTemplate>

           <input type="button" class="layui-btn layui-btn-xs" value="编辑" lay-event="edit">
           <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" lay-event="del">
    </script>

	<script id="danjuTemplate" type="text/html">
		<form class="layui-form" lay-filter="danjuForm">
			<div class="layui-form-item">
   				 <label class="layui-form-label">商品</label>
   				 <div class="layui-input-inline">
					<input type="hidden" name="djId"/>
					<input type="hidden" name="action" value="save"/>
<!--					<input type="text" name="commId" autocomplete="off" placeholder="请输入Id" class="layui-input">-->
					<select name="commId" id="select1">
						<option value=""></option>
					</select>										
    			</div> 
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">出入库日期</label>
   				 <div class="layui-input-inline">
      				<input type="date" name="djDate" autocomplete="off" placeholder="请输入出入库日期" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">出入库单位</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="djUnit" autocomplete="off" placeholder="请输入出入库单位" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">送/提货人</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="djShipper" autocomplete="off" placeholder="请输入送/提货人" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">出入库</label>
   				 <div class="layui-input-inline">
					 <select name="djCrk" id="select2">
						 <option>出库</option>
						 <option>入库</option>
					 </select>
<%--					<input type="text" name="djCrk" autocomplete="off" placeholder="请输入出入库" class="layui-input">--%>
    			</div>
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">出入库数量</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="djQuantity" autocomplete="off" placeholder="请输入数量" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
    			<div class="layui-input-block">
      				<button id="saveBtn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			</div>
  			</div>						
		</form>		
	</script>

	<script src="/lib/layui-v2.6.3/layui.js"></script>
	<script type="text/javascript">
		layui.use([ "table", "layer", "laydate", "form" ], function() {
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var form = layui.form;
			
		$("#addBtn").on("click",function() {
						
		$.get("/commodity?action=selall", function(all) {
							layer.open({
								type : 1,
								area : [ "400px", "500px" ],
								title : "新增单据",
								content : $("#danjuTemplate").html()
							});

							$.each(all, function(i, v) {
								// console.log(v);
								$("#select1").append("<option value='"+v.commId+"'>"+v.commName+"-"+v.commManufacturer+"-"+v.commMarking+"-"+v.commSpecifications+"</option>");
							});

							form.render();
						});
					});

			$("body").on("click", "#saveBtn", function() {
				var data = form.val("danjuForm");
				$.post("/danju", data, function(d) {
					if (d.code==0){
						layer.closeAll();
						layer.msg(d.msg);
						$("#searchBtn").click();
					}else{
						layer.msg(d.msg);
					}

				});
			});

			$("#searchBtn").on("click", function() {

				table.render({
					elem : "#danjuTable",
					url : "/danju",
					where : {
						keyword : $("#input1").val(),
						keyword2 : $("#input2").val(),
						action : "list"
					},
					cols : [ [ {
						title : "ID",
						field : "djId",
						width : 50,
						sort:true
					}, {
						title : "商品名称",
						field : "commName",
						width : 100
					}, {
						title : "生产厂家",
						field : "commManufacturer",
						width : 120
					}, {
						title : "商品种类",
						field : "commMarking",
						width : 120
					}, {
						title : "商品品种",
						field : "commSpecifications",
						width : 120
					}, {
						title : "出/入库日期",
						field : "djDate",
						width : 120,
						sort:true
					}, {
						title : "单据生成时间",
						field : "djTime",
						width : 180,
						sort:true
					}, {
						title : "创建人",
						field : "djCreateby",
						width : 80
					}, {
						title : "出/入库单位",
						field : "djUnit",
						width : 120
					}, {
						title : "送/提货人",
						field : "djShipper",
						width : 120
					}, /* {
																	title : "剩余数量",
																	field : "commQuantity",
																width: 80
																}, */{
						title : "出入库",
						field : "djCrk",
						width : 80
					}, {
						title : "出/入库数量",
						field : "djQuantity",
						width : 120
					},

					{
						title : '操作',
						width : 120,
						toolbar : '#operateTemplate',
						align : "center"
					} ] ],
					page : true,
					limit:5,
					limits : [ 5, 10, 15, 20 ]
				});
			});
			//用代码点了一下搜索
			$("#searchBtn").click();

			table.on("tool(table1)", function(obj) {
				var data = obj.data;
				if (obj.event == "edit") {
					$.get("/commodity?action=selall",function(all){	
					$.get("/danju?action=sel&&id=" + obj.data.djId,function(m) {
						
								layer.open({
									type : 1,
									area : [ "400px", "320px" ],
									title : "编辑单据",
									content : $("#danjuTemplate").html()
								});
								
								$.each(all,function(i,v){//v代表一个一个部门,保存中发请求到/emp/save后台时传入参数
									//console.log(v);
								    if(data.commId==v.commId){		                	  
								    	$("#select1").append("<option selected value='"+v.commId+"'>"+v.commName+"-"+v.commManufacturer+"</option>")
								    }else{
								        $("#select1").append("<option value='"+v.commId+"'>"+v.commName+"-"+v.commManufacturer+"-"+v.commMarking+"-"+v.commSpecifications+"</option>")			                      
								    }
								});
								form.render();
								form.val("danjuForm", m);
							});
						
					});
				}

				if (obj.event == "del") {
					layer.confirm("您确定要删除此商品吗？", function() {
						$.post("/danju", {
							id : obj.data.djId,
							action : "delete"
						}, function() {
							layer.closeAll();
							$("#searchBtn").click();
						});
					});
				}
			})
		});
	</script>
</body>
</html>